<template>
  <div>
    <div class="am-u-sm-12 am-form">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
        <div class="am-form-group">
          <select2
            v-model="query.areaTeamId"
            :options="areaTeams"
          >
            <option value="">区域</option>
          </select2>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
        <div class="am-form-group">
          <select2
            v-model="query.periodId"
            :options="periods"
          >
            <option value="">期数</option>
          </select2>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
        <div class="am-form-group">
          <select2
            v-model="query.gradeId"
            :options="grades"
          >
            <option value="">年级</option>
          </select2>
        </div>
      </div>

      <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
        <div class="am-form-group">
          <select2
            v-model="query.subjectId"
            :options="subjects"
          >
            <option value="">科目</option>
          </select2>
        </div>
      </div>

      <div class="am-u-sm-20 am-u-md-20 am-u-lg-8 am-u-end">
        <div class="am-form-group">
          <button
            type="button"
            class="am-btn am-btn-default am-btn-success"
            @click="search"
          ><span class="am-icon-search"></span>查询
          </button>

          <button
            type="button"
            class="am-btn am-btn-default am-btn-success"
            @click="returnPremium"
            :disabled="multipleSelection.length <=0"
          >批量退费
          </button>
          <button
            type="button"
            class="am-btn am-btn-default am-btn-success"
            @click="toStudentInfo"
            :disabled="!(studentInfo.phoneNo && studentInfo.name)"
          >更多数据分析
          </button>
        </div>
      </div>

    </div>
    <div class="am-u-sm-12">
      <el-table
        :data="tableData"
        border
        stripe
        style="min-width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          fixed
          type="selection"
          width="55"
          :selectable="tableCheckbox"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="courseClass.classNo"
          label="班级编号"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          fixed
          label="班级名称"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.courseClass.className}}

          </template>
        </el-table-column>
        <el-table-column
          label="期数"
          min-width="120"
        >
          <template scope="scope">
            {{scope.row.courseClass.periodName }}

          </template>
        </el-table-column>

        <el-table-column
          label="校区"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.courseClass.campusName}}

          </template>
        </el-table-column>

        <el-table-column
          label="咨询师"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.studentReg.counselorName}}

          </template>
        </el-table-column>

        <el-table-column
          label="教室"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.courseClass.roomName}}

          </template>
        </el-table-column>
        <el-table-column
          label="开课日期"
          min-width="150"
        >
          <template scope="scope">
            {{scope.row.courseClass.startCourseTime | formatDate }}

          </template>
        </el-table-column>
        <el-table-column
          prop="courseClass.studyingTime"
          label="上课时间"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          label="年级"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.courseClass.gradeName}}

          </template>
        </el-table-column>

        <el-table-column
          label="总金额"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.courseClass.studyingFee}}

          </template>
        </el-table-column>
        <el-table-column
          label="已上/总讲数"
          min-width="120"
        >
          <template scope="scope">
            {{scope.row.courseClass.completedLectureAmount}}/{{scope.row.courseClass.lectureAmount}}

          </template>
        </el-table-column>
        <el-table-column
          label="在读讲数"
          min-width="100"
        >
          <template scope="scope">
            {{scope.row.studentReg.startAmount}}-{{scope.row.studentReg.endAmount}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="120"
        >
          <template scope="scope">
            <el-dropdown v-if="scope.row.status != 2">
              <span class="el-dropdown-link">
                操作菜单<i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">

                <el-dropdown-item
                  size="small"
                  :disabled="scope.row.studentReg.chargingStatus != 2 || scope.row.courseClass.progressStatus == 2 || scope.row.studentReg.refundStatus == 1"
                  @click.native="turnClass(scope.row.studentReg.regId)"
                >转班</el-dropdown-item>

                <el-dropdown-item
                  size="small"
                  :disabled="scope.row.studentReg.refundStatus == 1 "
                  @click.native="shiftClass(scope.row.studentReg.regId)"
                >临时调课</el-dropdown-item>
                <el-dropdown-item
                  size="small"
                  :disabled="scope.row.studentReg.chargingStatus != 2 || scope.row.studentReg.refundStatus == 1||!scope.row.canRefund "
                  @click.native="studentRefund(scope.row.studentReg.regId)"
                >退费申请
                </el-dropdown-item>
                <el-dropdown-item
                  size="small"
                  :disabled="scope.row.studentReg.chargingStatus != 2 || scope.row.studentReg.refundStatus == 1 "
                  @click.native="management(scope.row)"
                >发票管理
                </el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>

          </template>
        </el-table-column>
      </el-table>

      <turn-class
        ref="turnClass"
        @completed="loadDataTable"
      ></turn-class>
      <shift-class
        ref="shiftClass"
        @completed="loadDataTable"
      ></shift-class>
      <student-refund
        ref="studentRefund"
        @completed="loadDataTable"
      ></student-refund>

    </div>
  </div>
</template>

<script>
import io from '../../lib/io'

import Pagination from '../base/Pagination'
import TurnClass from './TurnClass'
import ShiftClass from './ShiftClass'
import StudentRefundForm from './StudentRefundForm'

export default {
  data: function() {
    return {
      refund: '',
      studentId: '',
      tableData: [],
      allData: [],
      query: {
        areaTeamId:
          (window.config.areaTeams[0] &&
            window.config.areaTeams[0].areaTeamId) ||
          '',
        periodId: '',
        gradeId: '',
        subjectId: ''
      },
      periods: [],
      multipleSelection: []
    }
  },
  components: {
    'turn-class': TurnClass,
    'shift-class': ShiftClass,
    'student-refund': StudentRefundForm
  },
  props: ['studentInfo'],
  created: function() {
    let _this = this
    this.loadDataTable()
    this.loadPeriodData()
    this.$root.$on('order:new', () => {
      _this.loadDataTable()
    })
    this.$root.$on('order:pay:success', () => {
      _this.loadDataTable()
    })
  },
  watch: {
    'query.areaTeamId': function() {
      this.query.periodId = ''
      this.loadPeriodData()
    }
  },
  computed: {
    areaTeams: function() {
      var options = (this.$root.config.areaTeams || []).map(function(item) {
        return { value: item.areaTeamId, text: item.name }
      })
      return options
    },
    grades: function() {
      return this.$root.config.grades.map(function(item) {
        return { value: item.gradeId, text: item.gradeName }
      })
    },
    subjects: function() {
      return this.$root.config.subjects.map(function(item) {
        return { value: item.subjectId, text: item.subjectName }
      })
    }
  },
  methods: {
    management(row) {
      this.$router.push(
        `/main/enroll/student/invoiceList?orderId=${
          row.studentReg.regId
        }&orderType=regId`
      )
    },
    toStudentInfo(student) {
      let param = {
        studentName: this.studentInfo.name,
        phone: this.studentInfo.phoneNo
      }
      let w = window.open('_blank') //防止浏览器拦截，先打开空页面在重定向
      io.post(io.apiFindMoreStudentInfo, param, ret => {
        if (ret.success) {
          w.location = ret.data //重定向
        } else {
          this.$alert(ret.desc)
        }
      })
    },
    tableCheckbox(row, index) {
      if (
        row.studentReg.chargingStatus == 2 &&
        row.studentReg.refundStatus != 1 &&
        row.canRefund
      ) {
        return 1
      } else {
        return 0
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    returnPremium() {
      let itemArray = this.multipleSelection.map(item => {
        return item.studentReg.regId
      })
      this.studentRefund(itemArray)
    },
    search() {
      let list = []
      this.allData.map(val => {
        if (
          (!this.query.periodId ||
            this.query.periodId === val.courseClass.periodId) &&
          (!this.query.areaTeamId ||
            this.query.areaTeamId === val.courseClass.areaTeamId) &&
          (!this.query.gradeId ||
            this.query.gradeId === val.courseClass.gradeId) &&
          (!this.query.subjectId ||
            this.query.subjectId === val.courseClass.subjectId)
        ) {
          list.push(val)
        }
      })
      this.tableData = list
    },
    loadPeriodData: function() {
      var _this = this
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        function(ret) {
          if (ret.success) {
            _this.periods = ret.data.map(function(item) {
              return { value: item.periodId, text: item.periodName }
            })
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    },
    loadDataTable: function() {
      var _this = this
      var studentId = this.$params('studentId')
      //创建订单和注册信息
      io.post(
        io.apiAdminStudentReadClassList,
        {
          studentId: studentId
        },
        function(ret) {
          if (ret.success) {
            _this.allData = ret.data
            _this.tableData = ret.data
          } else {
            _this.$alert(ret.desc || '处理失败')
          }
        }
      )
    },
    turnClass: function(regId) {
      this.$refs.turnClass.regId = regId
      this.$refs.turnClass.show()
    },
    shiftClass: function(regId) {
      this.$refs.shiftClass.regId = regId
      this.$refs.shiftClass.show()
    },
    studentRefund: function(item) {
      if (typeof item === 'string') {
        item = [item]
      }
      this.$refs.studentRefund.regArray = [...item]
      this.$refs.studentRefund.show()
    }
  }
}
</script>
